<template>
    <div>
        <Card>
            <!-- search start -->
            <div class="search_div">
                <div class="add">
                    <div v-if="role < 3 " class="importFile">
                        <!-- <Upload action="//jsonplaceholder.typicode.com/posts/" accept=".pdf" :format="['.pdf']" :show-upload-list="false" :max-size="1" :on-exceeded-size="fileSize" :on-format-error="formatType">
                            <Button type="warning" icon="md-cloud-upload">上传文件</Button>
                        </Upload> -->
                        <div class="importExcel">
                            <Button size="default" icon="md-cloud-upload" type="warning">上传文件</Button>
                            <input class="imBtn" type="file" @change="upFile($event)" multiple="multiple">
                        </div>
                    </div>
                    <Button v-if="role < 3 " size="default" icon="md-add" type="primary" @click="createFile">创建文件夹</Button>
                </div>
                <Form :model="search" class="search_box" inline label-position="right">
                    <FormItem label="文件名：">
                        <Input v-model="search.keywords"></Input>
                    </FormItem>

                    <FormItem>
                        <Button icon="md-search" type="primary" @click="searchList">搜索</Button>
                    </FormItem>
                </Form>

            </div> <!-- end search -->

            <div class="filePath">
                <span v-for="(item, index) in filePath" :key=" 'file'+ index">
                    <span @click="clickFilePath(index,item)" class="path" :class="{'strong':index == filePath.length-1}"> {{ item.name }} </span>
                    <i v-show="index < filePath.length-1 "> / </i>
                </span>
            </div>

            <Table ref="table" :loading="loading" stripe :columns="columns1" :data="data1" @on-row-click="clickRow"></Table>
            <Page :total="total" :current="currentPage" show-sizer show-total :page-size="pageSize" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum"> </Page>
        </Card>

        <Modal v-model="modal1" :title=" formItem.wrcid? '修改文件':'新建文件夹'" :mask-closable="false">
            <Form :label-width="140" :model="formItem">
                <FormItem label="文件名：">
                    <Input v-model="formItem.name" style="width:15vw"></Input>
                </FormItem>

                <div v-if="formItem.wrcid">
                    <FormItem v-if="formItem.type == 1 && role < 2" label="创建密码：">
                        <RadioGroup v-model="formItem.is_password">
                            <Radio :label='0'>否</Radio>
                            <Radio :label='1'>是</Radio>
                        </RadioGroup>
                    </FormItem>

                    <FormItem label="密码：" v-if="formItem.is_password == 1 && role < 2">
                        <Input v-model="formItem.password" style="width:15vw"></Input>
                    </FormItem>

                </div>

                <div v-else>
                    <FormItem v-if="formItem.type == 1 && role < 3" label="创建密码：">
                        <RadioGroup v-model="formItem.is_password">
                            <Radio :label='0'>否</Radio>
                            <Radio :label='1'>是</Radio>
                        </RadioGroup>
                    </FormItem>

                    <FormItem label="密码：" v-if="formItem.is_password == 1 && role < 3">
                        <Input v-model="formItem.password" style="width:15vw"></Input>
                    </FormItem>
                </div>

            </Form>
            <footer class="modalFooter" slot="footer">
                <Button type="default" @click="modal1=false">取消</Button>
                <Button type="primary" @click="save">保存</Button>
            </footer>
        </Modal>

        <Modal v-model="modal2" title=" 请输入密码 ">
            <Form :label-width="140">
                <FormItem label="密码：">
                    <Input v-model="password" style="width:15vw"></Input>
                </FormItem>

            </Form>
            <footer class="modalFooter" slot="footer">
                <Button type="default" @click="modal2=false">取消</Button>
                <Button type="primary" @click="submitPsd">确定</Button>
            </footer>
        </Modal>

        <unpreview v-if="show_unpreview" :show_unpreview="show_unpreview" @change_unknown="change_unknown" :file_url="file_url"></unpreview>

    </div>
</template>
<script>
    import axios from '@/libs/api.request'
    import unpreview from './unpreview'
    import {
        mapGetters
    } from 'vuex'
    export default {
        name: 'file-page',
        components: {
            unpreview
        },
        data() {
            return {
                modal1: false,
                modal2: false,
                file_url: '',
                show_unpreview: false,

                // 搜索对象
                search: {
                    keywords: ''
                },

                wordPng: require('@/assets/images/word.png'),
                pptPng: require('@/assets/images/ppt.png'),
                excelPng: require('@/assets/images/excel.png'),
                pdfPng: require('@/assets/images/pdf.png'),
                jpgPng: require('@/assets/images/jpg.png'),
                jpegPng: require('@/assets/images/jpeg.png'),
                gifPng: require('@/assets/images/gif.png'),
                mp4Png: require('@/assets/images/mp4.png'),
                pngPng: require('@/assets/images/png.png'),
                unknownPng: require('@/assets/images/unknown.png'),

                // 密码
                password: '',
                itemPsd: '',

                itemObj: {},

                // 文件路径
                filePath: [{
                    id: 0,
                    name: '文件中心'
                }],

                parentid: 0,

                // 新增/修改对象
                formItem: {},

                loading: false,

                // 数据总条数
                total: 0,

                // 当前页码
                currentPage: 1,

                // 每页条数
                pageSize: 10,

                columns1: [{
                        title: '文件名',
                        align: 'left',
                        minWidth: 450,
                        render: (h, params) => {
                            let suffix = params.row.name.substring(params.row.name.lastIndexOf('.'))
                            if (params.row.type == 1) {
                                return h('div', {
                                    style: {
                                        cursor: 'pointer',
                                        position: 'relative',
                                    }
                                }, [
                                    h('Icon', {
                                        props: {
                                            type: "ios-folder"
                                        },
                                        style: {
                                            color: '#f7dc7b',
                                            fontSize: '24px'
                                        }
                                    }),
                                    h('span', {
                                        style: {
                                            color: '#006eff',
                                            fontSize: '10px',
                                            position: 'absolute',
                                            bottom: '0',
                                        }
                                    }, params.row.name + ' /')
                                ])
                            } else {
                                return h('div', {
                                    style: {
                                        cursor: 'pointer',
                                        position: 'relative',
                                    }
                                }, [
                                    h('img', {
                                        style: {
                                            height: '25px',
                                            verticalAlign: 'middle',
                                            marginRight: '5px'

                                        },
                                        attrs: {
                                            src: suffix.indexOf('.doc') != -1 ? this.wordPng : suffix.indexOf('.ppt') != -1 ? this.pptPng : suffix.indexOf('.pdf') != -1 ? this.pdfPng : suffix.indexOf('.xls') != -1 ? this.excelPng : suffix.indexOf('.jpg') != -1 ? this.jpgPng : suffix.indexOf('.jpeg') != -1 ? this.jpegPng : suffix.indexOf('.gif') != -1 ? this.gifPng : suffix.indexOf('.mp4') != -1 ? this.mp4Png : suffix.indexOf('.png') != -1 ? this.pngPng : this.unknownPng
                                        }
                                    }),
                                    h('span', params.row.name)
                                ])
                            }
                        },
                    },
                    {
                        title: '大小',
                        align: 'center',
                        minWidth: 60,
                        key: 'size'
                    },
                    {
                        title: '是否加密',
                        align: 'center',
                        key: 'is_password_zw'
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        width: 160,
                        key: 'c_time'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 240,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'default',
                                        icon: 'md-brush',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: e => {
                                            if (this.role > 2) return false
                                            e.stopPropagation()
                                            this.formItem = {
                                                wrcid: params.row.id,
                                                name: params.row.name,
                                                type: params.row.type,
                                                is_password: params.row.is_password,
                                                password: params.row.password
                                            }
                                            this.modal1 = true

                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'default',
                                        icon: 'md-brush',
                                        disabled: this.role > 1
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: e => {
                                            e.stopPropagation()
                                            if (this.role > 1) return false
                                            this.$Modal.confirm({
                                                title: '您确定要删除吗',
                                                content: '',
                                                onOk: () => {
                                                    this.delCateByid(params.row.id)
                                                }
                                            });

                                        }
                                    }
                                }, '删除'),
                            ])
                        }
                    }
                ],
                data1: [],
            }
        },
        methods: {
            ...mapGetters(['getRole']),

            // 获取文件列表
            async getFileList() {
                this.loading = true
                let data = {
                    page: this.currentPage,
                    rows: this.pageSize,
                    parentid: this.parentid,
                    keywords: this.search.keywords
                }
                let res = await axios.ajax_post('admin-work_record_cloud-ajax_get_wrc', data)
                this.loading = false

                if (res.data.code === 1) {
                    ({
                        list: this.data1,
                        parentid: this.parentid,
                        total_num: this.total
                    } = res.data.data)

                } else {
                    this.$Notice.error({
                        title: res.data.msg,
                        duration: 3
                    })
                }
            },

            // 上传文件
            upFile(e) {
                let files = e.target.files
                if (files.length < 1) return false

                for (let index = 0; index < files.length; index++) {

                    const file = files[index]
                    // let isType = false
                    // let suffix = file.name.substring(file.name.lastIndexOf('.'))
                    // switch (suffix) {
                    //     case '.pdf':
                    //         isType = false
                    //         break;

                    //     case '.doc':
                    //         isType = false
                    //         break;

                    //     case '.docx':
                    //         isType = false
                    //         break;

                    //     case '.ppt':
                    //         isType = false
                    //         break;

                    //     case '.pptx':
                    //         isType = false
                    //         break;

                    //     case '.xls':
                    //         isType = false
                    //         break;

                    //     case '.xlsx':
                    //         isType = false
                    //         break;

                    //     default:
                    //         isType = true
                    //         break;
                    // }
                    // // 文件类型限制
                    // if (isType) {
                    //     this.$Notice.error({
                    //         title: '上传的文件格式错误，请您重新选择',
                    //         duration: 3
                    //     })
                    //     return false
                    // }
                    // 文件大小限制
                    // if (file.size >= 100 * 1024 * 1024) {
                    //     this.$Notice.error({
                    //         title: '上传的文件不能大于100M',
                    //         duration: 3
                    //     })
                    //     return false
                    // }

                    axios.up_to_oos(file, (file_url) => {

                        let data = {
                            name: file.name,
                            size: file.size,
                            url: file_url.replace('http://', 'https://'),
                            parentid: this.parentid
                        }
                        axios.ajax_post('admin-work_record_cloud-ajax_add_file', data).then(res => {
                            this.loading = false
                            if (res.data.code === 1) {
                                this.$Notice.success({
                                    title: res.data.msg,
                                    duration: 3
                                })
                                this.getFileList()
                            } else {
                                this.$Notice.error({
                                    title: res.data.msg,
                                    duration: 3
                                })
                            }
                        })
                    })

                }



            },

            // 点击列表事件
            clickRow(e, index) {
                if (e.type !== 1) {
                    // 文件后缀
                    let suffix = e.name.substring(e.name.lastIndexOf('.'))

                    // 微软在线预览
                    let url = 'http://view.officeapps.live.com/op/view.aspx?src='
                    switch (suffix) {
                        case '.pdf':
                            window.open(e.url)
                            return false
                            break;
                        case '.jpg':
                            window.open(e.url)
                            return false
                            break;
                        case '.jpeg':
                            window.open(e.url)
                            return false
                            break;
                        case '.png':
                            window.open(e.url)
                            return false
                            break;
                        case '.gif':
                            window.open(e.url)
                            return false
                            break;
                        case '.mp4':
                            window.open(e.url)
                            return false
                            break;
                        case '.doc':
                            window.open(url + e.url)
                            return false
                            break;
                        case '.docx':
                            window.open(url + e.url)
                            return false
                            break;
                        case '.ppt':
                            window.open(url + e.url)
                            return false
                            break;
                        case '.pptx':
                            window.open(url + e.url)
                            return false
                            break;
                        case '.xls':
                            window.open(url + e.url)
                            return false
                            break;
                        case '.xlsx':
                            window.open(url + e.url)
                            return false
                            break;

                        default:
                            this.show_unpreview = true
                            this.file_url = e.url
                            return false
                            break;
                    }




                }
                if (e.is_password == 1) {
                    this.itemPsd = e.password
                    this.modal2 = true
                    this.itemObj = {
                        id: e.id,
                        name: e.name
                    }
                    return false
                }
                this.filePath.push({
                    id: e.id,
                    name: e.name
                })
                this.parentid = e.id
                this.currentPage = 1
                this.pageSize = 10
                this.getFileList()
            },

            // 提交密码
            submitPsd() {
                if (this.password == this.itemPsd) {

                    this.filePath.push(this.itemObj)
                    this.parentid = this.itemObj.id
                    this.modal2 = false
                    this.password = ''
                    this.currentPage = 1
                    this.pageSize = 10
                    this.getFileList()

                } else {
                    this.$Notice.error({
                        title: '密码错误',
                        duration: 3
                    })
                }
            },

            // 点击文件路径
            clickFilePath(index, item) {
                this.filePath = this.filePath.slice(0, index + 1)
                this.parentid = item.id
                this.currentPage = 1
                this.pageSize = 10
                this.getFileList()
            },

            // 创建文件夹
            createFile() {
                this.formItem = {
                    parentid: this.parentid,
                    name: '',
                    is_password: 0,
                    password: '',
                    type: 1
                }
                this.modal1 = true
            },

            searchList() {
                this.currentPage = 1
                this.pageSize = 10
                this.getFileList()
            },

            getListByPageSize(pageSize) {
                this.pageSize = pageSize
                this.getFileList()
            },

            getListByPageNum(page) {
                this.currentPage = page
                this.getFileList()
            },

            // 删除文件/文件夹
            delCateByid(wrcid) {
                let data = {
                    wrcid
                }
                axios.ajax_post('admin-work_record_cloud-ajax_del_folder', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: '删除成功',
                            duration: 3
                        })
                        this.getFileList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 改变下载遮罩状态
            change_unknown() {
                this.show_unpreview = false
            },

            // 保存
            save() {
                let data = this.formItem
                let url = 'admin-work_record_cloud-ajax_add_folder'
                if (data.wrcid) {
                    url = 'admin-work_record_cloud-ajax_save_folder'
                }
                axios.ajax_post(url, data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.modal1 = false
                        this.getFileList()
                    } else {
                        this.modal1 = true
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },
        },
        computed: {
            role() {
                return this.getRole()
            }
        },
        created() {

            this.getFileList()
        }

    }
</script>
<style lang="less" scoped>
    .search_div {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0;

        .search_box {
            width: auto;
        }

    }

    .importFile {
        margin-right: 10px;
        position: relative;
        display: inline-block;

        .imBtn {
            position: absolute;
            left: 0;
            opacity: 0;
            width: 100px;
            height: 32px;
            z-index: 999;
        }
    }

    .breadcrumb {
        margin: 10px 0;
    }

    .filePath {
        margin-bottom: 10px;

        .path {
            cursor: default;

            &:hover {
                color: #45a4e5;
            }
        }

        .path.strong {
            font-weight: 700;


            &:hover {
                color: #515a6e;
            }
        }

        i {
            color: #ccc;
            margin: 0 5px;
        }
    }
</style>